<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			img {
				display: block;
			}
			.king {
				margin: 100px auto;
				width: 852px;
				background:url(images/bg.png) no-repeat;
				padding: 10px;
			}
			.king ul {
				overflow: hidden;
			}
			.king li {
				position: relative;
				float: left;
				width: 69px;
	            height: 69px;
	            margin-right: 10px;
			}
			.king li.current {
				width: 224px;
			}
			.king li.current .small {
				display: none;
			}
			.king li.current .big {
				display: block;
			}
			.small {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 69px;
	            height: 69px;
	            border-radius: 5px;
			}
			.big {
				width: 224px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="king">
			<ul>
				<li class="current">
					<a href="#">
						<img src="images/m1.jpg" alt="" class="small"/>
						<img src="images/m.png" alt="" class="big"/>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/t1.jpg" alt="" class="small"/>
						<img src="images/t.png" alt="" class="big"/>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/l1.jpg" alt="" class="small"/>
						<img src="images/l.png" alt="" class="big"/>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/w1.jpg" alt="" class="small"/>
						<img src="images/w.png" alt="" class="big"/>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/h1.jpg" alt="" class="small"/>
						<img src="images/h.png" alt="" class="big"/>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/c1.jpg" alt="" class="small"/>
						<img src="images/c.png" alt="" class="big"/>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/z1.jpg" alt="" class="small"/>
						<img src="images/z.png" alt="" class="big"/>
					</a>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			$(function() {
				//鼠标经过li有两部操作：
				$(".king li").mouseenter(function() {
					//1.当前li的宽度变为224px，同时里边的小图片淡出，大图片淡入
					$(this).stop().animate({
						width:224
					}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
					//2.其余兄弟li 宽度变为 69px ，同时里边的小图片淡入，大图片淡出
					$(this).siblings("li").stop().animate({
						width:69
					}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
				});
			});
		</script>
	</body>
</html>
